import Qt 4.7

Item {
    id: main

    width: 640
    height: 360

    state: "showingDeck"

    Image {
        id: background
        anchors.fill:  parent
        source: "gfx/bg_landscape.png"
    }

    AboutView {
        id: aboutView
        anchors.fill: main
        opacity: 0.0
        onClicked: {
            console.log("Clicked on about, go back")
            main.state = "showingDeck"
        }
        Behavior on opacity  { NumberAnimation   { duration: 500; } }
    }

    DeckView {
        id: deckView
        anchors.fill: main

        // which directory under gfx to use for card graphics
        themeName: "futu"
        opacity: 1.0

        Behavior on opacity  { NumberAnimation   { duration: 500; } }

        onCardClicked: {
            console.log(cardValue + " clicked.");
        }

        AboutButton {
            id: aboutButton
            width: 64
            height: 64
            opacity: deckView.zoomed ? 0.0 : 1.0

            anchors {
                top: parent.top
                left: parent.left
                margins: 10
            }
            onAboutRequested: {
                console.log("About");
                main.state = "showingAbout";
            }

            Behavior on opacity  { NumberAnimation   { duration: 500; } }
        }
    }

    QuitButton {
        id: quitButton
        width: 64
        height: 64
        opacity: deckView.zoomed ? 0.0 : 1.0

        anchors {
            top: main.top
            right: main.right
            margins: 10
        }
        onQuitRequested: {
            Qt.quit();
        }

        Behavior on opacity  { NumberAnimation   { duration: 500; } }

    }

    states: [
        State {
            name: "showingAbout"
            PropertyChanges {
                target: aboutView
                opacity: 1.0
            }
            PropertyChanges {
                target: deckView
                opacity: 0.0
            }
        },
        State {
            name: "showingDeck"
            PropertyChanges {
                target: aboutView
                opacity: 0.0
            }
            PropertyChanges {
                target: deckView
                opacity: 1.0
            }
        }

    ]
}
